<!DOCTYPE HTML>
<html>
  <head>
    <meta name="viewport" content="width=320; user-scalable=no" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>仪表盘</title>
    <script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
    <link rel="stylesheet" href="resources/css/touch-charts-demo.css" type="text/css">
    <link rel="stylesheet" href="resources/css/sencha-touch.css" type="text/css">
 
    <script type="text/javascript"  charset="utf-8" src="js/sencha-touch.js"></script>
    <script type="text/javascript"  charset="utf-8" src="js/touch-charts.js"></script>
    <script type="text/javascript"  charset="utf-8" src="js/db.js"></script>
    <script type="text/javascript"  charset="utf-8" src="js/clientReport.js"></script>
    <script type="text/javascript" >
    var server_page=1;//当前页
    
    var server_pagesize =5 ;//每页行数
    
    var server_total=0;//总数
    
    var server_total_page=0;//总页数
    
    var server_total_page_field=null;//显示总页数
    
	//服务端列表展现模板
	var itemTplServer=null;
    //客户端列表展现模板                                 
    var itemTplClient= '<div class="contact"  style="padding:10px">'+
                                          '<img src="icon/delete.png" height="36" width="36"   onclick="removeChart(\'{id}\')"/>&nbsp;&nbsp;'+ //删除按钮
                                           '<a   ><img src="icon/charticon/{define.charttype}/icon-ipad.png"  height="36" width="36"  onclick="openChart(\'{id}\')"/></a>'+   //打开报表按钮
                                          '&nbsp;&nbsp;<strong>{foldername}</strong> /<strong>{queryname}</strong>&nbsp;&nbsp;&nbsp;'+
                                          '<div id="loadingimg_{id}"></div>'+
                                          '</div>';
    
    //服务端数据源
    var serverStore=null;
    
    //客户端数据源
    var clientStore=null;
    
    var tabs=null;//标签页
    
    //设置页面
    Ext.setup({
        glossOnIcon: false,
        onReady: function() {
        	initdb();//初始化数据库

        }
    });
    
    function initView(){

    	
  	  //服务端数据源
      serverStore= new Ext.data.JsonStore({
          fields: ["id","queryname","define","foldername"]
      
      });
      
      
        //客户端数据源
      clientStore= new Ext.data.JsonStore({
          fields: ["id","queryname","define","foldername"]
      
      });
      
      var server_page_field= new Ext.Panel({html:"<font color='white'>第1页</font>"});//显示服务端当前页数

      server_total_page_field= new Ext.Panel({html:"<font color='white'>共1页</font>"});//显示服务端总页数
  	
  	
      tabs =new Ext.TabPanel({
           tabBar: {
              dock: 'bottom',
              layout: {
                  pack: 'center'//居中
              }
           },
           fullscreen: true,//全屏
           cardSwitchAnimation: false,
           ui: 'light',
           items:[
           
               
               {
                   title:"服务器",
                   iconCls: 'info',
                   items:[
                          
                          {
                            xtype: 'toolbar',
                            docked: 'top',
                            ui:"light",

                            items: [
                               server_total_page_field,
                               {
                                    text:"&nbsp;"
                               },
                               server_page_field,
                               {
                                    text: "下一页", 
                                    handler:function(){
                                    	//下一页
                                    	if(server_page<server_total_page)server_page=server_page+1; 
                                        server_page_field.el.dom.firstChild.innerHTML=("<font color='white'>第"+server_page+"页</font>");
                                        //刷新服务端列表
                                        refreshServerList(); 
                                    }
                               },
                               {
                                    text: "上一页", 
                                    handler:function(){ 
                                    	//上一页
                                    	if(server_page>1)server_page=server_page-1;
                                        server_page_field.el.dom.firstChild.innerHTML=("<font color='white'>第"+server_page+"页</font>");
                                        //刷新服务端列表
                                        refreshServerList(); 
                                       
                                    }
                               },
                               
                               { xtype: 'spacer' }
                            ]
                          },
                          {
                              
                              //give it an xtype of list
                              xtype: 'list',

                              ui: 'round',
                              height:"100%",

                              //itemTpl defines the template for each item in the list
                              itemTpl: itemTplServer,

                              //give it a link to the store instance
                              store: serverStore,
                              emptyText: '<div style="margin-top: 20px; text-align: center">没有报表</div>',
                              disableSelection: true
                           
                           }
                          
                      ]
               },
               {
                   
                   title:"已下载",
                   iconCls: 'download',
                   items:[
                          
                          {
                         
                            //give it an xtype of list
                            xtype: 'list',

                            ui: 'round',
                            height:"100%",

                            //itemTpl defines the template for each item in the list
                            itemTpl: itemTplClient,

                            //give it a link to the store instance
                            store: clientStore,
                            emptyText: '<div style="margin-top: 20px; text-align: center">没有报表</div>',
                            disableSelection: true
                         
                         }
                     ]
               },
               {
                   title:"设置",
                   iconCls: 'info',
                   items: [
               	        {
               	            xtype: 'fieldset',
               	            title: '设置',
               	            items: [
               	                {
               	                    xtype: 'textfield',
               	                    label: '服务地址',
               	                    id:"baseURL",
               	                    name: 'baseURL'
               	                }
               	            ]
               	        },
                   	    {
                               xtype: 'toolbar',
                               docked: 'bottom',
                               items: [
                   	    
                   	         {
                   	        	
                   	        	text:'保存',
                   	        	handler:function(){
                   	        		
                   	        		//保存服务地址设置
                   	        		updateSetting("baseURL",Ext.getCmp("baseURL").getValue());
                   	        	}
                   	          }
                   	        
                   	        ]
                   	    }
               	]
               }
           ]
  	 });   
    }
    
    
    
    
    //刷新服务端列表
    function refreshServerList(){
        //导入服务端数据
               Ext.Ajax.request({
      	        	    url: Ext.getCmp("baseURL").getValue()+'/restful/report/list/',
      	        	    params:{
      	        	        page:server_page,//当前页数
      	        	        pagesize:server_pagesize//每页行数
      	        	    },
      	        	    success: function(response){
      	        	        var result =Ext.decode( response.responseText);
      	        	        var rows=result.Rows;//当前页返回数据
      	        	        server_total=result.Total;//总数
      	        	        
      	        	        //总页数
      	        	        server_total_page = parseInt((server_total % server_pagesize ==0 )? (server_total /server_pagesize):(server_total / server_pagesize+1));
      	        	        
      	        	        //现实总页数
      	        	        if(server_total_page_field && server_total_page_field.el)
      	        	        server_total_page_field.el.dom.firstChild.innerHTML=("<font color='white'>共"+server_total_page+"页</font>");//显示总页数
      	        	        
      	        	        //加载本页数据
      	        	        serverStore.loadData(rows);
      	        	    }
      	       }); 
    
    }
     
    //下载报表到客户端
    function downloadChart(_id){
    	document.getElementById("loadingimg_"+_id).innerHTML="<img src='icon/loading.gif'  width=36  height=36/>";
    	
    	
    	//下载服务端数据
        Ext.Ajax.request({
	        	    url: Ext.getCmp("baseURL").getValue()+'/restful/report/chart/download/',
	        	    params:{
	        	        reportid:_id
	        	    },
	        	    success: function(response){
	        	      if(response.responseText && response.responseText!=''){
	        	        var result =Ext.decode( response.responseText);
	        	        
	        	        
	        	        if(result.define.data){
	        	        	Ext.Msg.alert('提示', '下载成功', Ext.emptyFn);
	        	        	//有数据时保存报表信息
	        	            saveQuery(_id , result.queryname , Ext.encode(result.define),  result.foldername);
	        	        	
	        	            
	        	        }
	        	        else{
	        	            Ext.Msg.alert('提示', '下载失败,没有数据', Ext.emptyFn);
	        	        
	        	        }
	        	        
	        	        
	        	        
	        	        
	        	      }else{
	        	      
	        	        Ext.Msg.alert('提示', '下载失败', Ext.emptyFn);
	        	      }
	        	      
	        	      document.getElementById("loadingimg_"+_id).innerHTML="";
	        	    }
	       }); 
    	
    }
    
    
  //刷新客户端报表
    function refreshClientReport(){
    	getClientReportList(function(tx,results){
    		
    		var data=[];
    		
    		if(results.rows.length>0){
    			
    		   for(var i=0,s=results.rows.length;i<s;i++){
    			   var item=results.rows.item(i);
    			   data.push({
    				   id: item.id,//ID
    				   queryname :item.queryname ,//报表名
    				   foldername: item.foldername ,//目录名
    				   define : Ext.decode(item.define)//报表定义
    				   
    			   });
    		   }	
    		}
            //加载数据库
            clientStore.loadData(data);
    		
    	});
            
            
         
    }
  
    //删除报表
    function removeChart(_id){
    	removeClientReportList(_id ,refreshClientReport);
    	
    }
    </script>
  </head>
  <body style="background:white">
  </body>
</html>
